<template>
    <!-- 
        在vue的语法环境下，为了解决组件定义时大量组件代码被构建在一个HTML文件中的确定
        实际开发中一般都会将组件的相关配置独立出去，可以采用 js 文件的方式进行定义组件配置
        因为JS文件在定义模板语法时存在困难

        所以vue专门声明以一种特殊文件叫做单文件vue，该文件以 .vue 作为后缀名，用来独立定义组件的相关代码
        因此官方把以该文件定义的组件 叫做 单文件组件

        官方对该文件专门提供解析器 vue-loader ，但该解析器只能用于 模块化项目中
        -> 浏览器中可以使用 基于该解析的 扩展版本 http-vue-loader
        -> 仅限于 程序员学习时 测试使用，不建议用于商业项目
    -->
    <!-- 
        Vue的 .vue 文件中 可以定义三个固定区域代码
            <template> 定义当前文件对应组件的模板结构信息</template>
                      vue-loader 解析器会将该文件中的 template 标签包裹的html结构作为组件的模板使用
                      如果 vscdoe 安装了 Vetur 插件，该标签内保留 html语法

            <script> 以固定语法格式 定义 组件的相关配置，也可以加载其它组件
                         module.exports = { 组件配置 }
                     在 .vue 文件中进行组件页面结构和组件配置定义时，可以不用描述template
                     因为 vue-loader 会自行完成模板和配置的关联操作

            <style>  // 该标签可以出现多个
                     跟随当前文件装载需要的相关样式
     -->
    <div>
        <p>msg:{{ msg }}</p>
    </div>
</template>
<script>

    module.exports = {
        data:function(){
            return {
                msg:"测试数据"
            }
        },
        methods: {
            printMsg(){
                console.log(this.msg)
            }
        },
        mounted() {
            console.log("mounted")
        },
    }


</script>

<style>
    h1{
        color:red;
    }
    h1 > span{
        font-size: 16px;
    }
</style>
<style>
    .a{
        background-color: #ccc;
    }
</style>